<template>
  <div class="app-container home">
    <!-- 销售单数据 -->
    <el-row :gutter="20" v-loading="loading" v-if="$auth.hasPermi('saledata:customer:query')">
      <el-col :span="6" v-for="item in statisticData">
        <el-card shadow="hover" style="width: 100%;">
          <div class="card-content">
            <el-statistic group-separator="," :value="item.count" :title="item.signState"></el-statistic>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import {
    statistic
  } from "@/api/bus_web/saledata/customer";
  export default {
    name: "Index",
    data() {
      return {
        // 遮罩层
        loading: true,
        statisticData: []
      }
    },
    created() {
      this.getStatisticData();
    },
    methods: {
      getStatisticData() {
        //销售单数据
        if (this.$auth.hasPermi('saledata:customer:query')) {
          this.loading = true;
          statistic().then(response => {
            this.statisticData = response.rows;
            this.loading = false;
          })
        }
      }
    }
  }
</script>
<style scoped>
  .el-row {
    margin-bottom: 20px;
    /* 设置每行之间的垂直间距 */
  }

  .el-col {
    margin-bottom: 20px;
    /* 设置每个卡片之间的垂直间距 */
  }

  .card-content {
    text-align: center;
    padding: 20px;
    /* 调整卡片内部内容的间距 */
  }
</style>
